<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>消息列表</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/formSelects/formSelects-v4.css"/>
</head>
<style>
    .layui-inline{
        margin-bottom: 10px;
    }
</style>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

                <div class="layui-inline">
                    <label class="layui-form-label">消息状态</label>
                    <div class="layui-input-inline">
                        <select name="status" id="status">
                            <option value="">全部</option>
                            <option value="0">已发送</option>
                            <option value="1">未发送</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">所属机构:</label>
                        <div class="layui-input-inline">
                            <select name="organizationId" id="organizationId"  lay-verType="tips"
                                    lay-filter="organization">
                                <option value="">全部</option>
                                <% for(organizations in organizationsList) { %>
                                <option value="${organizations.id}">${organizations.organizationName}</option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">下发校区:</label>
                        <div class="layui-input-inline">
                            <select name="schoolId" id="schoolId" lay-verType="tips" lay-filter="school">
                                <option value="">全部</option>
                                <% for(school in schoolList) { %>
                                <option value="${school.id}">${school.schoolName}</option>
                                <% } %>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                    <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                </div>

                <div class="layui-form-item audit" style="margin-top: 20px">
                    <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                    <button id="btnDelete" class="layui-btn icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>
                </div>


                <div class="layui-form-item" style="margin-top: 10px">
                    <table class="layui-table" id="schoolInformTable" lay-filter="schoolInformTable" style="margin-top: 30px"></table>
                </div>

            </div>
        </div>
    </div>
</div>


<!-- 表格操作列 -->
<script type="text/html" id="schoolInformTableBar">
    {{# if(d.status==0){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="send">发送</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">查看</a>
    {{# } }}
</script>


<!-- 编辑 表单弹窗 -->
<script type="text/html" id="schoolInformEditLayer">
    <form id="schoolInformForm" lay-filter="schoolInformForm" class="layui-form model-form"
          style="margin-left: 20px;height: 500px">
        <input name="id" type="hidden"/>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>消息标题:</label>
            <div class="layui-input-block">
                <input id="title" name="title" placeholder="请输入" type="text" class="layui-input"
                       lay-verType="tips" lay-verify="required" required autocomplete="off" maxlength="10"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>消息正文:</label>
            <div class="layui-input-block">
                <textarea id="content" name="content" placeholder="请输入" type="textarea" class="layui-textarea"
                          lay-verType="tips" lay-verify="required" required autocomplete="off" rows="10" maxlength="200"></textarea>
            </div>
        </div>

        <div id="sendDiv" class="layui-form-item" hidden>
            <label class="layui-form-label"><span style="color: red">*</span>下发校区:</label>
            <div class="layui-input-block">
                <textarea id="sendSchool" name="school" placeholder="请输入" type="textarea" class="layui-textarea" rows="2"></textarea>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button id="submitBtn" class="layui-btn" lay-filter="schoolInformSubmit" lay-submit>确定</button>
        </div>

    </form>
</script>


<!-- 发送弹框 -->
<script type="text/html" id="sendSchoolInformEditLayer">
    <form id="sendSchoolInformForm" lay-filter="sendSchoolInformForm" class="layui-form model-form"
          style="margin-left: 20px;height: 500px">
        <input name="id" type="hidden"/>

        <!--<div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>下发校区:</label>
            <div class="layui-input-block">
                <input name="school" placeholder="请输入" type="text" class="layui-input" />
            </div>
        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">下发校区</label>
            <div class="layui-input-block">
                <select id="school" name="school" xm-select="school" lay-verType="tips" lay-verify="required">
                    <option value="">请选择</option>
                    <% for(school in schoolList) { %>
                    <option value="${school.id}">${school.schoolName}</option>
                    <% } %>
                </select>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="sendSchoolInformSubmit" lay-submit>保存</button>
        </div>

    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>

<script>
    layui.use(['layer', 'form', 'jquery', 'table', 'admin', 'laydate', 'upload', 'jquery', 'formSelects' ,'excel'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var formSelects = layui.formSelects;
        window.excel = layui.excel;


        //日期
        laydate.render({elem: '#searchDate', range: true});

        layui.formSelects.on('school', function(id, vals, val, isAdd, isDisabled){

        });

        var insTb = table.render({
            elem: '#schoolInformTable',
            url: 'schoolInform/list',
            page: true,
            cellMinWidth: 100,
            title: '消息列表',
            text: {none: '暂无数据'},
            cols: [[
                {type: 'checkbox'},
                {type: 'numbers', title: '编号'},
                {field: 'id', title: 'id' , width:50,hide: true},
                {field: 'title', title: '消息标题'},
                {field: 'content', title: '消息内容'},
                {field: 'school', title: '下发校区'},
                {field: 'createdDate', title: '创建时间'},
                {field: 'status', title: '状态 ' ,templet: function (d) {
                        var str=" - ";//0待发送，1已发送
                        if(d.status==0){
                            str="待发送";
                        }else if(d.status==1){
                            str="已发送";
                        }
                        return str;
                    }
                },
                {align: 'center', toolbar: '#schoolInformTableBar',width: 200}
            ]],
            done: function (res) {
                exportData = res.data;
            }
        });


        //搜索
        $('#btnSearch').click(function () {
            var organizationId = $('#organizationId').val();
            var schoolId = $('#schoolId').val();
            var status = $('#status').val();

            insTb.reload({
                where: {
                    organizationId: organizationId,
                    schoolId: schoolId,
                    status: status
                }
            });
        });

        // 重置
        $('#btnReset').click(function () {
            $("#organizationId").val("");
            $("#schoolId").val("");
            $("#status").val("");
            window.location.reload();
        });

        // 新增
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(schoolInformTable)', function (obj) {
            console.log(1);
            var data = obj.data;
            var layEvent = obj.event;

            switch (layEvent) {
                // 修改
                case 'edit':
                    showEditModel(data);
                    break;
                // 查看
                case 'details':
                    showEditModel(data);
                    break;
                // 发送
                case 'send':
                    showSendModel(data);
                    break;
            }
        });

        //选择机构后筛选所负责的校区
        form.on('select(organization)', function (data) {
            changeSchool();
        });

        form.on('select(school)', function (data) {
            changeClasss();
        });

        function changeSchool() {
            $("#schoolId").empty();
            $("#classId").empty();
            form.render("select");//重新渲染 固定写法
            var organizationId=$("#organizationId").val();
            if(organizationId!=null && organizationId!=""){
                $.ajax({
                    url: '/admin/school/getListByOrganizationId?organizationId='+ organizationId,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $('#schoolId').append(new Option("全部", ""));// 下拉菜单里添加元素
                        $('#classId').append(new Option("全部", ""));// 下拉菜单里添加元素
                        $.each(data, function (index, item) {
                            $('#schoolId').append(new Option(item.schoolName, item.id));// 下拉菜单里添加元素
                        });
                        form.render("select");//重新渲染 固定写法
                    }
                });
            }
        }

        function changeClasss() {
            $("#classId").empty();
            form.render("select");//重新渲染 固定写法
            var schoolId=$("#schoolId").val();
            if(schoolId!=null && schoolId!=""){
                $.ajax({
                    url: '/classs/getListBySchoolId?schoolId='+ schoolId,
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $('#classId').append(new Option("全部", ""));// 下拉菜单里添加元素
                        $.each(data, function (index, item) {
                            $('#classId').append(new Option(item.className, item.id));// 下拉菜单里添加元素
                        });
                        form.render("select");//重新渲染 固定写法
                    }
                });
            }
        }


        // 显示表单弹窗
        function showSendModel(inform) {
            console.log(1);
            admin.open({
                type: 1,
                area: ['700px', '450px'],
                title: '发送消息',
                content: $('#sendSchoolInformEditLayer').html(),
                success: function (layero, dIndex) {
                    var school = new Array();
                    //console.log(inform);
                    var url = '/admin/schoolInform/send';
                    // 回显数据
                    form.val('sendSchoolInformForm', inform);
                    formSelects.render('school', {init: school});
                    form.render();
                    var clickTag = 0;
                    if(clickTag==0){
                        form.on('submit(sendSchoolInformSubmit)', function (data) {
                            if(clickTag==0){
                                clickTag = 1;
                                data.field.schoolId = formSelects.value('school', 'valStr');
                                console.log(data.field.schoolId);
                                layer.close(dIndex);
                                ajaxCommon(url, data.field);
                                insTb.reload();
                                return false;
                            }else{
                                layer.alert("请勿频繁点击！");
                            }

                        });
                    }

                }
            });
        }


        // 显示表单弹窗
        function showEditModel(inform) {
            var title='新增消息';
            if(inform){
                if(inform.status==1){
                    title='查看消息';
                }else{
                    title='编辑消息';
                }
            }
            admin.open({
                type: 1,
                area: ['700px', '500px'],
                title: title,
                content: $('#schoolInformEditLayer').html(),
                success: function (layero, dIndex) {
                    console.log(1);
                    var url = inform ? '/admin/schoolInform/update' : '/admin/schoolInform/add';
                    // 回显数据
                    if (inform) {
                        if(inform.status==1){
                            $('#title,#content,#sendSchool').attr("readonly","readonly");
                            $('#submitBtn').hide();
                            $('#sendDiv').show();
                        }else{
                            $('#sendDiv').hide();
                            $('#submitBtn').show();
                        }
                        form.val('schoolInformForm', inform);
                    }else{
                        $('#sendDiv').hide();
                    }

                    form.render();

                    form.on('submit(schoolInformSubmit)', function (data) {
                        layer.close(dIndex);

                        ajaxCommon(url, data.field);

                        insTb.reload();
                        return false;
                    });
                }
            });
        }

        // 删除
        $('#btnDelete').click(function () {
            var checkStatus = table.checkStatus('schoolInformTable'),
                data = checkStatus.data; //获取选中的数据
            deleteSchoolInforms(data);
        });

        //删除消息
        function deleteSchoolInforms(data) {
            if(data.length === 0){
                layer.msg('请选择一行');
            } else {
                layer.confirm('确定要删除' + data.length  + '条数据吗？',{
                        skin: 'layui-layer-admin'
                    }, function (i) {
                        top.layer.close(i);
                        layer.load(2);
                        var informIds=getInformIds(data);
                        $.post('/admin/schoolInform/deleteIds', {
                            informIds: informIds
                        }, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                                //obj.del();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                    }
                );
            }
        }

        //获取删除的消息id
        function getInformIds(data){
            var arr = new Array();;
            for(var i = 0;i<data.length;i++){
                arr.push(data[i]['id']);
            }
            return arr.join(",");
        }


    })

</script>

</body>
</html>